import React from 'react'
import type { FC, ReactNode } from 'react'
import { Select, ConfigProvider } from 'antd'

import { useMyDispatch } from '../../../store'
import { setSucessLanguage } from '../../../store/modules/success'
import { setLanguageChange } from '../../../store/modules/codeall'
import styles from './index.module.scss'

interface IProps {
  children?: ReactNode
  language?: string
}
const LanguageSelector: FC<IProps> = ({ language }) => {
  const dispatch = useMyDispatch()
  const onChange = (value: string) => {
    dispatch(setSucessLanguage(value))
    dispatch(setLanguageChange(true))
  }

  const onSearch = (value: string) => {
    console.log('search:', value)
  }
  return (
    <ConfigProvider theme={{ token: { colorText: 'black' } }}>
      <Select
        showSearch
        placeholder={language ? language : '请选择语言'}
        optionFilterProp="label"
        onChange={onChange}
        onSearch={onSearch}
        options={[
          { label: 'JavaScript', value: 'JavaScript' },
          { label: 'Java', value: 'Java' },
          { label: 'Python', value: 'Python' },
          { label: 'C++', value: 'C++' },
          { label: 'C', value: 'C' },
          { label: 'C#', value: 'C#' },
          { label: 'HTML', value: 'HTML' },
          { label: 'CSS', value: 'CSS' },
          { label: 'SCSS', value: 'SCSS' },
          { label: 'MarkDown', value: 'MarkDown' },
          { label: 'GO', value: 'GO' },
          { label: 'JSON', value: 'JSON' }
        ]}
        style={{ width: 150, height: 25, color: 'black' }}
        className={styles.language}
      />
    </ConfigProvider>
  )
}

export default LanguageSelector
